<template>
    <div>
        <h2>jquery 请求 ajax </h2>
        <p v-for="(l,i) in list" :key="i">
            {{l}}
        </p>
        <div>
            <p>注册</p>
            <p>用户名:  <input type="text" placeholder="请输入用户名" v-model="form.username"> </p>
            <p>手机号:  <input type="text" placeholder="请输入手机号" v-model="form.phone"> </p>
            <p>密码:  <input type="text" placeholder="请输入密码" v-model="form.password"> </p>
            <p><button @click="addUsers">添加</button></p>
        </div>
        <div v-for="(l,i) in users" :key="l.username"> 
            <p> {{l.username}} - {{l.phone}} -- {{l.password}}  
                <button @click="deleteOne(l)">删除</button>
                <button @click="updateOne(l,i)">修改</button>
            </p>
        </div>
    </div>
</template>


<script>
const commonUrl = "http://localhost:2107"
export default {
    data(){
        return {
            list:[],
            form:{

            },
            users:[]
        }
    },
    methods:{
        updateOne(item,index){
            var value = window.prompt(item.id,item.username)
            if(value){
                $.ajax({
                    url:commonUrl+"/users/"+item.id,
                    type:"patch",
                    data:{
                        username:value
                    },
                    success:res=>{
                        this.users.splice(index,1,{...item,username:value})
                    }
                })
            }

        },
        deleteOne(item){
            $.ajax({   // 服务器删除  
                url:commonUrl+"/users/"+item.id,
                type:'delete',
                success:res=>{
                    console.log(res)
                    // 前端删除  
                    this.users = this.users.filter(val=>val.id!==item.id);
                }
            })
        },
        addUsers(){
            // 添加用户 
            // $.ajax({
            //     url:commonUrl+'/users',
            //     type:"POST",
            //     data:{
            //         ...this.form 
            //     },
            //     success:res=>{
            //         console.log(res)
            //     }
            // })
            $.post(commonUrl+'/users',{
                ...this.form
            })
            .then(res=>{
                $.get(commonUrl+"/users")
                .then(res=>{
                    this.users= res 
                })
            })
        }
    },
    mounted(){
        // $.ajax({
        //     url:commonUrl+"/first",
        //     type:"GET",
        //     data:{
        //         id:2107
        //     },
        //     success:res=>{
        //         console.log(res)
        //         this.list = res;
        //     },
        // })
        $.get(commonUrl+"/first",{
            id:2100
        })
        .then(res=>{
            this.list = res;
        })

        $.get(commonUrl+"/users")
        .then(res=>{
            this.users= res 
        })
    }
}
</script>